<!-- 使用例子：
//用去当前时间，并格式化
let dateStr = this.$parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}')
this.date = dateStr
//打开时间选择器（时间选择器默认不显示）
this.$refs.datePicker.show = true

<jp-picker-date ref="datePicker" :date.sync="date" title="请选择完成日期"></jp-picker-date>

注意：在设置maxDate 和minDate时，iOS处理时间戳需要使用标准格式（iOS不认识2023-05-17 00:00:00格式需要处理成2023/05/17 00:00:00）
maxDate = maxDate.replace(/-/g, '\/')
let timeStamp = new Date(maxDate).getTime()

注意:":date.sync" 使得子组件时间的更新也会同步到父组件的属性上 -->

<template>
	<view>
		<u-datetime-picker ref="uDateTimePicker" :title="title" closeOnClickOverlay :show="show" :formatter="formatter" v-model="dateTemp"
			:mode="mode" @cancel="cancel" @confirm="dateSelect" confirmColor="var(--uni-color-primary)" :maxDate="maxDate" :minDate="minDate">
			<template #customToolbar>
				<slot name="customToolbar">
					
				</slot>
			</template>
		</u-datetime-picker>
	</view>
</template>

<script>
	export default {
		name: "jp-picker-date",
		props: {
			title: {
				type: String,
				default: "请选择日期",
				require: false
			},
			date: {
				type: [String, Number],
				require: false
			},
			mode: {
				type: String,
				default: "datetime", //datetime:年月日时分；date:年月日；year-month：年月；time:时分
				require: false
			},
			maxDate: {
				type:Number,
				default:(new Date).getTime() + 10*365 * 24 * 3600 * 1000,
				require:false
			},
			minDate: {
				type:Number,
				default:(new Date).getTime() - 10*365 * 24 * 3600 * 1000,
				require:false
			},
			identity: {
				type: String,
				require: false
			}
		},
		data() {
			return {
				show: false,
				dateTemp: null,
			};
		},
		watch:{
			show(newV,oldV){
				if(newV == true){
					uni.hideKeyboard()
				}
			},
			date: {
				handler(newVal) {
					if(newVal) {
						newVal = newVal.replace(/-/g, '\/')
						this.dateTemp = Number(new Date(newVal))
					}else {
						this.dateTemp = Number(new Date())
					}
				},
				immediate: true
			}
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}

				return value
			},
			cancel() {
				this.show = false
				this.$emit('cancel')
			},
			dateSelect(e) {
				if(e == null || e==undefined) {
					//外部触发dateSelect函数
					e = {
						value: this.$refs.uDateTimePicker.innerValue,
						mode: this.mode
					}
					return this.formatterDateStr(e)
				}
				this.formatterDateStr(e)
				this.show = false
			},
			formatterDateStr(e) {
				let dateStr
				switch (e.mode) {
					case 'datetime':
						// 年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"
						dateStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
						break;
					case 'date':
						dateStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
						break;
					case 'year-month':
						dateStr = uni.$u.timeFormat(e.value, 'yyyy-mm')
						break;
					case 'time':
						dateStr = e.value
						break;
					default:
						dateStr = ''
						break;
				}
				//方式一 :date.sync=""  方式更新父组件值(小程序不支持动态设置属性值方式 例如 :date.sync="model['optionType']" ,这时候可以选择方式二)
				this.$emit('update:date', dateStr)
				
				//方式二 通过@updateDate="" 方式更新父组件值
				this.$emit('updateDate',dateStr,this.identity)
				
				console.log('【jp-picker-date】dateSelect=>' + dateStr)
				return dateStr
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
